<template>
	<view class="user-view column justify-between">
		<view class="w-100">
			<u-navbar :background="background" :is-back="false" :border-bottom="false">
			</u-navbar>
			<view class="user-center">
				<view class="w-100 user-heard u-bdr-12 u-m-b-20">
					<view class="user-info u-p-l-20">
						<block v-if="token">
							<!-- <view class="row align-start" @click="$navTo('/pages/me/userinfo')">
								<u-avatar :src="avatar ? avatar : require('@/hl/logo/logo.png')" size="142"></u-avatar>
								<view class="u-flex-1 u-m-l-16 u-p-t-16">
									<view class="row u-m-b-16">
										<view class="u-m-r-16 u-f-40 font-weight-550">{{userName}}</view>
										<image
											:src="isVIP ? require('@/static/images/me/Vips_.png') : require('@/static/images/me/Vips.png')"
											class="vip-img" mode=""></image>
									</view>
									<view class="row">
										<view class="row u-m-r-20" @click.stop="$navTo('/me/jifen/jifen')">
											<image src="@/static/images/me/1.png" class="num-img" mode=""></image>
											<view class="u-f-24">积分{{jifen}}</view>
										</view>
									</view>
								</view>
							</view> -->

							<view class="info flex align-center justify-center">
								<view class="info-box">
									<view class="info-box-c flex align-center justify-between">
										<view class="info-box-c-l flex align-center"
											@click="$navTo('/pages/me/userinfo')">
											<view class="info-box-c-l-avatar">
												<uni-image>
													<div
														:style="avatar ? 'background-image: url('+avatar+'); background-position: 0% 0%;background-size: 100% 100%;background-repeat: no-repeat;' :'background-image: url(https://duanju-star.oss-cn-beijing.aliyuncs.com/duanju_logo.png); background-position: 0% 0%;background-size: 100% 100%;background-repeat: no-repeat;'">
													</div>

													<img :src="avatar ? avatar : require('@/hl/logo/logo.png')"
														draggable="true">
												</uni-image>
											</view>
											<view class="info-box-c-l-name">
												<view class="info-box-c-l-name-t">{{userName}}</view>
												<view class="info-box-c-l-name-b">ID:{{userId}}</view>
											</view>
										</view>
										<view class="info-box-c-r">
											<view class="u-icon u-icon--right">
												<uni-text hover-class=""
													class="u-icon__icon uicon-arrow-right u-iconfont"
													style="font-size: 15px; font-weight: normal; top: 0px; color: rgb(246, 246, 246);">
													<span>

													</span>
												</uni-text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="statistics flex align-center justify-center">
								<view class="statistics-box flex align-center justify-between">
									<view class="statistics-box-item" @click="$navTo('/me/jilu/myLove')">
										<view class="statistics-box-item-top">{{likeCount}}</view>
										<view class="statistics-box-item-btn">我的喜欢</view>
									</view>
									<view class="statistics-box-item" @click="$navTo('/me/jilu/histor')">
										<view class="statistics-box-item-top">{{collectCount}}</view>
										<view class="statistics-box-item-btn">我的追剧</view>
									</view>
									<view class="statistics-box-item" @click="$navTo('/me/jifen/jifen')">
										<view class="statistics-box-item-top">{{jifen}}</view>
										<view class="statistics-box-item-btn">我的积分</view>
									</view>
								</view>
							</view>
						</block>
						<block v-if="!token">
							<view class="row" @click="$navTo('/pages/login/login')">
								<!-- <u-avatar :src="require('@/static/images/logo.jpg')" size="142"></u-avatar> -->
								<u-avatar :src="require('@/hl/logo/logo.png')" size="142"></u-avatar>
								<view class="u-m-l-16 u-f-36">立即登录</view>
							</view>
						</block>
					</view>
					<!-- <view class="vip-center space-between"> -->
					<!-- <view class="money flex align-center justify-center" v-if="token"> -->
					<view class="row" v-if="token">
						<!-- <image src="@/static/images/me/Vips_.png" class="vip-img" mode=""></image> -->
						<view class="u-m-l-10 w-s-color-67 u-f-24" v-if="!isVIP">
							<view class="row" @click="$navTo('/me/vip/index')" v-if="!isVIP">
								<view class="vip flex align-center justify-center">
									<view class="vip-box flex align-center justify-between">
										<view class="vip-box-l">
											<view class="vip-box-l-l flex align-center">开通会员<uni-image>
													<div
														style="background-image: url(&quot;&quot;); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;">
													</div><!----><img
														src=""
														draggable="false">
												</uni-image></view>
											<view class="vip-box-l-r">升级VIP，省更多钱</view>
										</view>
										<view class="vip-box-r flex align-center justify-center">立即开通</view>
									</view>
								</view>
								<!-- <view class="w-s-color-67 u-f-20 u-m-r-8">去开通</view>
									<u-icon name="arrow-right" color="#999" size="24"></u-icon> -->
							</view>
						</view>
						<view class="u-m-l-10 w-s-color-67 u-f-24" v-else>
							<view class="vip flex align-center justify-center">
								<view class="vip-box flex align-center justify-between">
									<view class="vip-box-l">
										<view class="vip-box-l-l flex align-center">会员用户<uni-image>
												<div
													style="background-image: url(&quot;&quot;); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;">
												</div><!----><img
													src=""
													draggable="false">
											</uni-image></view>
										<view class="vip-box-l-r">{{endTime?endTime+'到期':'您是尊贵的永久会员'}}</view>
									</view>
									<!-- <view class="vip-box-r flex align-center justify-center"></view> -->
								</view>
							</view>
							<!-- {{endTime?endTime+'到期':'您是尊贵的永久会员'}} -->
						</view>
						<!-- </view> -->

					</view>
				</view>

				<view class="money flex align-center justify-center" v-if="token">
					<view class="money-box flex align-center justify-between" @click="$navTo('/me/wallet/wallet')">
						<view>
							<view class="money-box-title flex align-center">
								<view class="money-box-title-l">金豆余额</view>
								<view class="money-box-title-r" style="margin-left: 6px;">
									<view class="u-icon u-icon--right">
										<!-- <uni-text data-v-e4d6d362="" hover-class=""
											class="u-icon__icon uicon-eye-off u-iconfont"
											style="font-size: 21px; font-weight: normal; top: 0px; color: rgb(90, 74, 50);">
											<span></span>
										</uni-text> -->
									</view>
								</view>
							</view>
							<view class="money-box-price">{{formatNumber(moneyNum)}}</view>
						</view>
						<view class="money-box-btn">立即充值</view>
					</view>
				</view>

				<!-- <view class="u-m-b-20 bg-f u-bdr-12 px-32">
					<view class="jindou-heard space-between" @click="$navTo('/me/wallet/wallet')">
						<view class="u-f-32 font-weight-550">我的金豆</view>
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
					<view class="jindou-num space-between" @click="$navTo('/me/wallet/wallet')">
						<view class="u-f-40 font-weight-550">{{formatNumber(moneyNum)}}</view>
						<view class="flex-center bg-primary w-s-color-f u-f-24 u-bdr-32"
							style="background-color: #ffb6ed;">立即充值</view>
					</view>
				</view> -->
				<!-- <view class="u-m-b-20 bg-f u-bdr-12 u-p-b-10" v-if="list.length>0">
					<view class="zjgk-heard px-2 space-between" @click="$navTo('/me/jilu/jilu')">
						<view class="u-f-32 font-weight-550">最近观看</view>
						<view class="row">
							<view class="u-m-r-8 w-s-color-9 u-f-24">更多</view>
							<u-icon name="arrow-right" color="#999" size="24"></u-icon>
						</view>
					</view>
					<view class="px-1">
						<prefecture-view :heardShow="false" :list='list'></prefecture-view>
					</view>
				</view> -->
				<view class="u-m-b-52 u-bdr-12 bg-f u-p-b-2" style="margin-top: 10px;">
					<view class="u-p-t-32 u-p-l-20 u-p-b-0 u-f-32 font-weight-550"></view>
					<view class="space-between flex-wrap">
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/invite/inviteDet')">
							<image src="@/static/images/me/vtd.png" mode=""></image>
							<view class="u-f-24">我的钱包</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/create/index')">
							<image src="@/static/images/me/chuangzuo.png" mode=""></image>
							<view class="u-f-24">创作中心</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/order/index')">
							<image src="@/static/images/me/taocan.png" mode=""></image>
							<view class="u-f-24">平台推广</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/shop/index')">
							<image src="@/static/images/me/shop.png" mode=""></image>
							<view class="u-f-24">商城</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/spreader/info')">
							<image src="@/static/images/me/spreader_ioc.png" mode=""></image>
							<view class="u-f-24">推广者</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/spreader/salleList/index')">
							<image src="@/static/images/me/sp_pic01.png" mode=""></image>
							<view class="u-f-24">推广大厅</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/message/index')">
							<image src="@/static/images/me/messige.png" mode="">
							</image>
							<view class="u-f-24">消息中心</view>
							<view class="unread-badge" v-if="unreadCount > 0">
								{{ unreadCount }}
							</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="toAct()">
							<image src="@/static/images/me/activity.png" mode=""></image>
							<view class="u-f-24">活动中心</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/invite/index')">
							<image src="@/static/images/me/vfx.png" mode=""></image>
							<view class="u-f-24">分享好友</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="goMsg">
							<image src="@/static/images/me/vkf.png" mode=""></image>
							<view class="u-f-24">联系客服</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/feedbackIndex/feedbackIndex')">
							<image src="@/static/images/me/bangzhu.png" mode=""></image>
							<view class="u-f-24">帮助中心</view>
						</view>
						<view class="direction cygj-item u-m-b-36" @click="$navTo('/me/setting/index')">
							<image src="@/static/images/me/setting.png" mode=""></image>
							<view class="u-f-24">设置中心</view>
						</view>
						<view class="cygj-item"></view>
						<view class="cygj-item"></view>
					</view>
				</view>

			</view>
		</view>
		<!-- <view class="all-btn" :class="list.length==0 ? 'active-btn' : ''">
			<view class="flex-center">
				<image src="@/static/images/me/3.png" class="img-all" mode=""></image>
				<view style="font-size: 20rpx;color: #AEAEAE;">提供技术支持</view>
			</view>
		</view> -->
		<u-popup v-model="connectionShow" mode="center">
			<view class="connection-view direction">
				<view class="connert-view direction u-m-b-52 w-100" @longpress="longpress">
					<u-image width="284rpx" height="288rpx" border-radius="0" :src="image"></u-image>
					<view class="connert-text u-f-32">长按保存二维码</view>
				</view>
				<image src="@/static/images/me/6.png" @click="connectionShow=false" class="close-img" mode=""></image>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- 抖音im客服 -->
		<ttMsg />
	</view>
</template>

<script>
	import prefectureView from "../index/prefectureView.vue"
	import ttMsg from '@/components/ttMsg/ttMsg.vue'
	export default {
		components: {
			prefectureView,
			ttMsg
		},
		data() {
			return {
				background: {
					backgroundColor: 'linear-gradient(to right, rgb(255, 229, 234) 0%, rgb(228, 245, 251) 49%, rgb(255, 240, 238) 100%)'
				},
				list: [],
				jifen: 0,
				moneyNum: 0, //余额
				userName: "",
				userId: "",
				avatar: "",
				token: "",
				isVIP: false,
				endTime: '', //会员到期时间
				connectionShow: false,
				image: "",
				collectCount: 0,
				likeCount: 0,
				unreadCount: 0
			}
		},
		onLoad() {},
		onShow() {
			this.getUserInfo()
			setInterval(() => {
				this.unreadCount = uni.getStorageSync('numCount')
			}, 1000);
			this.unreadCount = uni.getStorageSync('numCount')
			this.newLook()
			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getMyMoney()
				this.getJifen()
				this.$u.api.userinfo().then(res => {
					if (res.code == 0 && res.data) {
						uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
						uni.setStorageSync('userName', res.data.userName)
						uni.setStorageSync('avatar', res.data.avatar)
						this.userName = res.data.userName
						this.userId = res.data.invitationCode
						this.avatar = res.data.avatar
						this.collectCount = res.collectCount
						this.likeCount = res.likeCount
					}
				})
				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$u.api.userVip(data).then(res => {
					if (res.code == 0 && res.data && res.data.isVip == 2) {
						this.isVIP = true;
						this.endTime = res.data.endTime
						uni.setStorageSync('isVIP', true)
					} else {
						this.isVIP = false;
						this.endTime = ''
						uni.setStorageSync('isVIP', false)
					}
				})
			} else {
				this.moneyNum = 0
			}
			/* 客服二维码 */
			this.$u.get('/app/common/type/205').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.image = res.data.value;
					}
				}
			});

		},
		methods: {
			toAct() {
				this.$Request.getT('/app/activityDraw/selectOne').then(res => {
					this.activityDraw = res.data
					if (res.data != null) {
						uni.navigateTo({
							url: "/me/activitys/index"
						})
					} else {
						this.$refs.uToast.show({
							title: '活动暂未开始，敬请期待',
							type: 'info'
						});
					}

				})
			},
			getUserInfo() {
				let userId = uni.getStorageSync('userId')
				if (!userId) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			longpress() {
				// #ifndef H5
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				uni.downloadFile({
					url: 'https://bqb-1308417858.cos.ap-shanghai.myqcloud.com/duanju/2024/1/7/f60de56b-58f2-4530-88b8-4b996a6ca91e.jpg',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: (res) => {
									uni.hideLoading()
									this.$refs.uToast.show({
										title: '保存成功',
										type: 'success'
									});
								},
								fail: (err) => {
									uni.hideLoading()
									this.$refs.uToast.show({
										title: '保存失败',
										type: 'error'
									});
								}
							})
						}
					},
					fail: () => {
						uni.hideLoading()
						this.$refs.uToast.show({
							title: '保存失败',
							type: 'error'
						});
					}
				})
				// #endif
			},
			/**
			 * @param {Number} num
			 * @param 保留两位小数
			 */
			formatNumber(num) {
				// 判断是否为整数
				if (Number.isInteger(num)) {
					return num.toFixed(2);
				} else {
					return num.toFixed(2).replace(/\.?0+$/, '');
				}
			},
			/**
			 * 获取余额
			 */
			getMyMoney() {
				this.$Request.getT('/app/moneyDetails/selectUserMoney').then(res => {
					if (res.code == 0) {
						this.moneyNum = res.data.money
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 获取积分
			 */
			getJifen() {
				this.$Request.getT('/app/integral/selectByUserId').then(res => {
					if (res.code == 0) {
						this.jifen = res.data.integralNum
					} else {
						this.jifen = 0
					}
				})
			},
			//最近观看
			newLook() {
				let data = {
					page: 1,
					limit: 3,
					classify: 3, //1收藏 2点赞 3历史记录
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.list = res.data.records
					} else {
						this.list = []
					}
				})
			},
			goMsg() {
				this.connectionShow = true

				return
				let kefu = uni.getStorageSync('kefu'); // 用户端联系方式 1 手机号 2企业微信
				let kefuPhone = uni.getStorageSync('kefuPhone');
				if (kefu == 1) {
					uni.navigateTo({
						url: '/me/setting/kefu'
					})
				} else if (kefu == 3) {
					uni.makePhoneCall({
						phoneNumber: kefuPhone //仅为示例
					});
				} else if (kefu == 2) {
					// #ifdef MP-WEIXIN
					let that = this
					try {
						wx.openCustomerServiceChat({
							extInfo: {
								url: uni.getStorageSync('kefuUrl')
							},
							corpId: uni.getStorageSync('kefuAppId'),
							success(res) {},
							fail(res) {
								console.error(res)
							}
						})
					} catch (error) {
						console.error("catchcatch" + error)
						uni.showToast({
							title: '请更新至微信最新版本'
						});
					}
					// #endif
					// #ifndef MP-WEIXIN
					let url = uni.getStorageSync('kefuUrl');
					if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/index/webView?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
					// #endif
				}
			},
		}
	}
</script>

<style lang="scss">
	.login-btn {
		margin-left: 32rpx;
		padding: 16rpx 40rpx;
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		border-radius: 40rpx;
		box-shadow: 0 6rpx 12rpx rgba(255, 107, 107, 0.3),
			insent 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
		transform: translateY(0);
		transition: all 0.2s ease;

		text {
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 600;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}

		&:active {
			transform: translateY(4rpx);
			box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3),
				insent 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
		}
	}

	.u-navbar {
		background-image: linear-gradient(to right, rgb(255, 229, 234) 0%, rgb(228, 245, 251) 49%, rgb(255, 240, 238) 100%);
	}

	.u-navbar-inner {
		background: linear-gradient(90deg, #ffe5ea 0, #e4f5fb 49%, #fff0ee);
	}

	.u-navbar-inner {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		align-items: center;
	}

	.money {
		width: 100%;
		height: auto;
		margin-top: 10px;
	}

	.money .money-box {
		width: 376px;
		height: 100%;
		border-radius: 13px;
		background: #fff;
		padding: 16px;
	}

	.money .money-box-btn {
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		border-radius: 24px;
		padding: 9px 16px;
		font-size: 13px;
		color: #fff;
		font-weight: 700;
	}

	.money .money-box-title-l {
		color: #333;
		font-size: 15px;
		font-weight: 400;
	}

	.u-icon--right {
		flex-direction: row;
		align-items: center;
	}

	.u-icon__icon {
		position: relative;
	}

	.u-iconfont {
		position: relative;
		display: flex;
		font: normal normal normal 14px / 1 uicon-iconfont;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
	}

	.info {
		width: 100%;
		height: auto;
		// background: #f5f7ff;
		position: relative;
		border-radius: 0 0 43px 43px;
	}

	.justify-center {
		justify-content: center;
	}

	.align-center {
		align-items: center;
	}

	.flex {
		display: flex;
	}

	.info .info-box {
		width: 376px;
		height: 100%;
		position: relative;
		z-index: 3;
	}

	.direction {
		position: relative;
	}

	.info .info-box-c {
		width: 100%;
		height: 51px;
		margin-bottom: 76px;
	}

	.justify-between {
		justify-content: space-between;
	}

	.align-center {
		align-items: center;
	}

	.info .info-box-c-l-avatar {
		width: 51px;
		height: 51px;
		border-radius: 50%;
	}

	.info .info-box-c-l-avatar uni-image {
		width: 51px;
		height: 51px;
		border-radius: 50%;
	}

	.info .info-box-c-l-name {
		margin-left: 8px;
	}

	.info .info-box-c-l-name .info-box-c-l-name-t {
		color: #333;
		font-size: 17px;
		font-weight: 700;
	}

	.vip {
		width: 100%;
		margin-top: 16px;
	}

	.vip .vip-box {
		width: 338px;
		height: 100%;
		background: linear-gradient(90deg, #fef5e4, #fbecd7);
		border-radius: 13px;
		padding: 14px 16px;
	}

	.vip .vip-box-l-l {
		font-size: 17px;
		font-weight: 800;
		color: #5a4a32;
		line-height: 17px;
	}

	.vip .vip-box-l uni-image {
		width: 13px;
		height: 12px;
		margin-left: 3px;
	}

	.vip .vip-box-l-r {
		color: #817858;
		font-size: 14px;
		margin-top: 3px;
	}

	.vip .vip-box-r {
		width: 71px;
		height: 27px;
		background: #fff;
		box-shadow: 0px -1px 4px 0px hsla(0, 0%, 100%, .46);
		border-radius: 13px;
		color: #5a4a32;
		font-size: 12px;
	}

	.unread-badge {
		position: absolute;
		top: 0;
		right: 10%;
		background-color: red;
		color: white;
		border-radius: 50%;
		width: 20px;
		/* 根据需要调整大小 */
		height: 20px;
		/* 根据需要调整大小 */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		/* 根据需要调整字体大小 */
	}

	.statistics {
		width: 100%;
		height: auto;
		margin-top: -54px;
		position: relative;
		z-index: 3;
	}

	.justify-center {
		justify-content: center;
	}

	.align-center {
		align-items: center;
	}

	.statistics .statistics-box {
		width: 376px;
		border-radius: 13px;
	}

	.justify-between {
		justify-content: space-between;
	}

	.align-center {
		align-items: center;
	}

	.statistics .statistics-box-item-top {
		width: 100%;
		text-align: center;
		color: #333;
		font-size: 20px;
		font-weight: 700;
	}

	.statistics .statistics-box-item-btn {
		width: 100%;
		text-align: center;
		color: #999;
		font-size: 14px;
	}

	.money .money-box-price {
		color: #333;
		font-size: 26px;
		font-weight: 800;
		margin-top: 10px;
	}

	.uicon-eye {
		content: "\e613";
	}

	page {
		background: linear-gradient(180deg, #E8F0FC 0%, #F8F8FA 100%);
	}

	.user-view {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #E8F0FC 0%, #F8F8FA 100%);

		.all-btn {
			padding: 20rpx 0;
		}

		.img-all {
			width: 208rpx;
			height: 57rpx;
			margin-right: 20rpx;
		}

		.user-center {
			padding: 14rpx 32rpx;

			.vip-img {
				width: 36rpx;
				height: 30rpx;
			}

			.user-heard {
				// background: linear-gradient(180deg, #ECF2FC 0%, #FFFFFF 100%);

				.user-info {
					padding: 8rpx 0 12rpx 0;

					.num-img {
						width: 40rpx;
						height: 38rpx;
						margin-right: 8rpx;
					}
				}

				.vip-center {
					padding: 0 24rpx 0 20rpx;
					height: 66rpx;
					background: #FAFAFA;
					border-radius: 0rpx 0rpx 12rpx 12rpx;
				}
			}

			.jindou-heard {
				height: 90rpx;
				border-bottom: 1rpx solid #F8F8FA;
			}

			.jindou-num {
				height: 108rpx;

				view:last-child {
					width: 156rpx;
					height: 58rpx;
				}
			}

			.zjgk-heard {
				height: 100rpx;
			}

			.cygj-item {
				width: 25%;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 12rpx;
				}
			}

		}

		/deep/.u-mode-center-box {
			background-color: transparent;
		}

		.connection-view {
			width: 686rpx;

			.connert-view {
				height: 917rpx;
				background-image: url('http://duanjusaas.zyrkeji.cn/sqx_fast/file/uploadPath/2024/06/29/409a6ec5502bc3dc24a72a4c3b877d1a.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding-top: 354rpx;

				.connert-text {
					margin-top: 110rpx;
				}
			}

			.close-img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>